<template>
  <div class="wrapper">
    <div class="title">
      我的地址
      <span class="title__create">
        <router-link to="/addressEdit">新建</router-link>
      </span>
    </div>
    <div class="empty" v-if="addressList.length === 0">暂无地址信息</div>
    <div class="address" v-if="addressList.length > 0">
      <div
        class="address__item"
        v-for="address in addressList"
        :key="address._id"
        @click="() => handleAddressClick(address._id)"
      >
        <p class="address__item__basic">
          {{ address.name }}
          <span class="address__item__phone">{{ address.phone }}</span>
        </p>
        <p class="address__item__address">
          {{ address.city }}{{ address.department }} {{ address.houseNumber }}
        </p>
        <div class="iconfont">&#xe697;</div>
      </div>
    </div>
  </div>
  <Docker :currentIndex="3" />
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import Docker from "../../components/Docker";

//地址列表获取逻辑
const useAddressListEffect = () => {
  const addressList = ref([]);
  const getAddressList = async () => {
    axios
      .get("/api/users/address")
      .then((result) => {
        let { data } = result.data;
        if (result.data?.data.errno === 0) {
          addressList.value = data.data;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  return { addressList, getAddressList };
};

export default {
  name: "Address",
  components: { Docker },
  setup() {
    const router = useRouter();
    const { addressList, getAddressList } = useAddressListEffect();
    getAddressList();
    const handleAddressClick = (id) => {
      router.push(`/addressEdit?id=${id}`);
    };
    return {
      addressList,
      handleAddressClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.wrapper {
  overflow-y: auto;
  @include fix-content;
  background: $darkBgColor;
}
.title {
  position: relative;
  @include title;
  &__create {
    position: absolute;
    right: 0.18rem;
    font-size: 0.14rem;
    a {
      text-decoration: none;
      color: $content-fontcolor;
    }
  }
}
.address {
  margin: 0.16rem 0.18rem 0 0.18rem;
  &__item {
    position: relative;
    box-sizing: border-box;
    padding: 0.18rem 0.63rem 0.18rem 0.16rem;
    margin-bottom: 0.16rem;
    background: $bgColor;
    border-radius: 0.04rem;
    &__basic {
      line-height: 0.2rem;
      margin: 0;
      font-size: 0.14rem;
      color: $light-fontColor;
    }
    &__phone {
      margin-left: 0.66rem;
    }
    &__address {
      line-height: 0.2rem;
      margin: 0.08rem 0 0 0;
      font-size: 0.14rem;
      color: $content-fontcolor;
    }
  }
  .iconfont {
    transform: rotate(180deg);
    position: absolute;
    right: 0.16rem;
    top: 0.44rem;
    color: $light-fontColor;
    font-size: 0.2rem;
  }
}
.empty {
  margin-top: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.16rem;
  color: $light-fontColor;
}
</style>
